<template>
  <el-config-provider :locale="locale">
    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @cell-click="handleCellClick"
        @sort-change="handleSortChange"

    >
      <el-table-column v-if="isSelect" type="selection" width="55"/>
      <template v-for="(item,index) in tableColumn">
        <el-table-column v-if="item.slot" :prop="item.prop" :label="item.label" width="180">
          <template #default="scope">
            <!--      {{scope.row}}-->
            <slot :name="item.prop" :row="scope.row"></slot>
          </template>

        </el-table-column>
        <el-table-column v-else :prop="item.prop" :label="item.label" width="180">


        </el-table-column>
      </template>
    </el-table>
    <Pagination
        :total="total"
        :page="pageNum"
        :limit="pageSize"
        @pagination="handlePagination"
    />
  </el-config-provider>
</template>

<script setup lang="ts">
import Pagination from "@/components/Pagination/index.vue";
import type {TableColumnCtx} from "element-plus";

export type SortParams<T> = {
  column: TableColumnCtx<T | any>
  prop: string
  order: any
}
import {computed, defineComponent, defineProps, onMounted, ref, toRefs} from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

defineComponent({
  name: "ElTable"
})
const emit = defineEmits([
  'selection-change', // 当选择项发生变化时会触发该事件
  'row-click', // 当某一行被点击时会触发该事件
  'cell-click', // 当某个单元格被点击时会触发该事件
  'command', // 按钮组事件
  'size-change', // pageSize事件
  'current-change', // currentPage按钮组事件
  'pagination-change', // currentPage或者pageSize改变触发
  'sort-change', // 列排序发生改变触发
  'update:pageNum',
  'update:pageSize',

])

const props = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
  tableColumn: {
    type: Array,
    default: [],
  },
  isSelect: {
    type: Boolean,
    default: false,
  },
  // 页数
  pageNum: {
    type: Number,
    default: 1,
  },
  // 条数
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  }
})
const {tableData, tableColumn, isSelect, pageNum, pageSize, total} = toRefs(props)

onMounted(() => {
});

// 自定义索引
const indexMethod = (index: number) => {
  const tabIndex = index + (_paginationConfig.value.currentPage - 1) * _paginationConfig.value.pageSize + 1
  return tabIndex
}
// 切换pageSize
const pageSizeChange = (pageSize: number) => {
  emit('size-change', pageSize)
  emit('pagination-change', 1, pageSize)
}
// 切换currentPage
const currentPageChange = (currentPage: number) => {
  emit('current-change', currentPage)
  emit('pagination-change', currentPage, _paginationConfig.value.pageSize)
}
// 按钮组事件
const handleAction = (command: Table.Command, row: any, index: number) => {
  emit('command', command, row, index)
}
// 多选事件
const handleSelectionChange = (val: any) => {
  emit('selection-change', val)
}
// 当某一行被点击时会触发该事件
const handleRowClick = (row: any, column: any, event: MouseEvent) => {
  emit('row-click', row, column, event)
}
// 当某个单元格被点击时会触发该事件
const handleCellClick = (row: any, column: any, cell: any, event: MouseEvent) => {
  emit('cell-click', row, column, cell, event)
}
/**
 *  当表格的排序条件发生变化的时候会触发该事件
 * 在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。
 * 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
 * 如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，
 * 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
 */
const handleSortChange = ({column, prop, order}: SortParams<any>) => {
  emit('sort-change', {column, prop, order})
}
const handlePagination = (val) => {
  console.log("VLA1", val);
  emit('update:pageNum', val.page);
  emit('update:pageSize', val.limit);
  // emit('pagination-change', {pageNum:pageNum.value,pageSize:pageSize.value,total:total.value})
  // emit('pagination-change', {pageNum: val.page, pageSize: val.limit, total: total.value})
  emit('pagination-change')
}


</script>


<style scoped>

</style>
